<template>
	<view class="boss" v-if="show">
<!-- 		<view class="wrap-preload circle-ball loading_">
		  <view class="overlay"></view>
		  <view class="wrap-content">
		    <view class="wrap-circle-ball">
		      <view class="wrap-ball">
		        <view class="ball ball-top"></view>
		        <view class="ball ball-top"></view>
		      </view>
		      <view class="wrap-ball">
		        <view class="ball ball-bot"></view>
		        <view class="ball ball-bot"></view>
		      </view>
		      <view class="wrap-effect">
		        <view class="wrap-circle">
		          <view class="circle-effect left"></view>
		          <view class="circle-effect left"></view>
		        </view>
		        <view class="wrap-circle">
		          <view class="circle-effect right"></view>
		          <view class="circle-effect right"></view>
		        </view>
		      </view>
		    </view>
		 <view class="loading-text">
		 	{{text}} <text v-for="item in textDot">.</text>
		 </view>
		  </view>
		
		</view>
	
	 -->
	<view class="loader loading_">
	  <view class="loading-square"></view>
	  <view class="loading-square"></view>
	  <view class="loading-square"></view>
	  <view class="loading-square"></view>
	  <view class="loading-text">
	  	{{text}} <text v-for="item in textDot">.</text>
	  </view>
	</view>
	</view>
</template>

<script>
	export default {
		name: "loading",
		props: {
			text: {
				type: String,
				default: '加载中'
			}
		},
		data() {
			return {
				show: false,
				textDot: 0
			};
		},
		computed: {
			networkShow() {
				return this.$store.state.networkShow
			}
		},
		watch: {
			networkShow(a, b) {
				this.show = this.$store.state.networkShow.code
			}
		},
		mounted() {
			setInterval(() => {
				if (this.textDot === 3) return this.textDot = 0
				this.textDot++
			}, 1000)
		}
	};
</script>
<style scoped="true">
.loader {
  display: block;
  position: relative;
  height: 20upx;
  width: 86upx;
}

.loading-square {
  position: absolute;
  height: 20upx;
  width: 20upx;
  top: 0;
}

.loading-square:nth-child(1) {
  left: 0;
  animation: square1 1.5s linear forwards infinite;
}

.loading-square:nth-child(2) {
  left: 22upx;
  animation: square2 1.5s linear forwards infinite;
}

.loading-square:nth-child(3) {
  left: 44upx;
  animation: square3 1.5s linear forwards infinite;
}

.loading-square:nth-child(4) {
  left: 66upx;
  animation: square4 1.5s linear forwards infinite;
}

@keyframes square1 {
  0% {
    background-color: #FF5A5D;
    transform: translate(0, 0);
  }
  9.09091% {
    transform: translate(0, calc(-100% - 2upx));
    background-color: #FF5A5D;
  }
  18.18182% {
    transform: translate(calc(100% + 2upx), calc(-100% - 2upx));
    background-color: #FFCE2D;
  }
  27.27273% {
    transform: translate(calc(100% + 2upx), 0);
  }
  100% {
    background-color: #FFCE2D;
    transform: translate(calc(100% + 2upx), 0);
  }
}
@keyframes square2 {
  0% {
    background-color: #FFCE2D;
    transform: translate(0, 0);
  }
  18.18182% {
    transform: translate(0, 0);
  }
  27.27273% {
    transform: translate(0, calc(100% + 2upx));
    background-color: #FFCE2D;
  }
  36.36364% {
    transform: translate(calc(100% + 2upx), calc(100% + 2upx));
    background-color: #FF871D;
  }
  45.45455% {
    transform: translate(calc(100% + 2upx), 0);
  }
  100% {
    background-color: #FF871D;
    transform: translate(calc(100% + 2upx), 0);
  }
}
@keyframes square3 {
  0% {
    background-color: #FF871D;
    transform: translate(0, 0);
  }
  36.36364% {
    transform: translate(0, 0);
  }
  45.45455% {
    transform: translate(0, calc(-100% - 2upx));
    background-color: #FF871D;
  }
  54.54545% {
    transform: translate(calc(100% + 2upx), calc(-100% - 2upx));
    background-color: #A495FF;
  }
  63.63636% {
    transform: translate(calc(100% + 2upx), 0);
  }
  100% {
    background-color: #A495FF;
    transform: translate(calc(100% + 2upx), 0);
  }
}
@keyframes square4 {
  0% {
    transform: translate(0, 0);
    background-color: #A495FF;
  }
  54.54545% {
    transform: translate(0, 0);
  }
  63.63636% {
    transform: translate(0, calc(100% + 2upx));
    background-color: #A495FF;
  }
  72.72727% {
    background-color: #FF871D;
  }
  81.81818% {
    background-color: #FFCE2D;
  }
  90.90909% {
    transform: translate(calc(-300% - 6upx), calc(100% + 2upx));
    background-color: #FF5A5D;
  }
  100% {
    transform: translate(calc(-300% - 6upx), 0);
    background-color: #FF5A5D;
  }
}
</style>

 <style scoped="true" lang="scss">
	.loading-text {
		text-align: center;
		position: absolute;
		bottom: -80rpx;
		left: 0;
		right: 0;
		color: #333;
		font-size: 24rpx;
		color: #ffffff;
		
		text{
			padding-left: 10rpx;
			}
	}
	.boss {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999999;
		background-color: rgba(0, 0, 0, 0.19);
	}
	.loading_ {
		position: absolute;
		width: 110upx;
		// height: 150upx; 
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

</style>
